<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
    <title>html工具合集</title>
    <link rel="stylesheet" href="css/public.css">
    <style>
        .content{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }
        .content div{
            text-align: center;
            vertical-align: center;
            top: 100px;
            width: calc(25% - 10px);
            height: 100px;
            line-height: 100px;
            float: left;
            margin: 40px;
            color: #cfe2f3;
            font-size: 20px;
            cursor: pointer;
            border-radius: 20px;
            /* background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)); */
            background: linear-gradient(to bottom, rgba(30, 144, 255, 0.1), rgba(30, 144, 255, 0.1));
            box-shadow: 0 15px 50px rgba(0,0,0,0.5);
        }
        .content div:hover{
            color: #2c2c2c;
        }
    </style>
</head>
<body>
    <div class="content">
        <div onclick="openHtml('music.html')">音乐播放器</div>
        <div onclick="openHtml('rgb颜色查询对照表.html')">rgb颜色查询对照表</div>
        <div onclick="openHtml('DrawingBoard.html')">绘画板</div>
        <div onclick="openHtml('https://www.zhongguose.com/#zhanjianhui')">中国色</div>
        <div onclick="openHtml('https://www.ip138.com/yanse/selection.htm')">颜色选择器</div>
        <!--<div onclick="openHtml('看图画画.html')">看图画画</div>-->
        <!-- <div>补充2</div>
        <div>补充3</div> -->
    </div>

    <script>
        function openHtml(name){
	        var url = name;
	        if (!name.startsWith("https")){
		        url = 'html/' + url;
			}
            window.open(url);
        }
    </script>
</body>
</html>
